<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <ul id="example-1">
            <li v-for="item in items" :key="item.message">
              {{ item.message }}
            </li>
          </ul>

          <ul id="example-2">
            <li v-for="(item,index) in items">
                {{parentMessage}} - {{index}} - {{item.message}}
            </li>
          </ul>

          <ul id = "v-for-object" class="demo">
            <li v-for="(value,name,index) in object">
                {{index}}==== {{name}}:{{value}}
            </li>
          </ul>

          <div id = "todo-list-example">
            <form v-on:submit.prevent="addNewTodo">
                <label for="new-todo">add t a  todo</label>
                <input v-model="newTodoText" id="newTODO" placeholder="please do me a favor,give me a hand for my losing cat">
                <button>add</button>
            </form>
            <ul>
                <li is="todo-item" v-for="(todo,index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index,1)">
                </li>
            </ul>
          </div>

          <script>
            var example1 = new Vue({
                el:"#example-1",
                data:{
                    items:[
                        {message:"Foo"},
                        {message:"Bar"},
                    ]
                }
            })


            var example2 = new Vue({
                el:"#example-2",
                data:{
                    parentMessage:"parent",
                    items:[
                        {message:"foo"},
                        {message:"baa"}
                    ]
                }
            })

            var exampple3 = new Vue({
                el:"#v-for-object",
                data:{
                    object:{
                        title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
                    }
                }
            })


            Vue.component('todo-item', {
                template: '\
                    <li>\
                    {{ title }}\
                    <button v-on:click="$emit(\'remove\')">Remove</button>\
                    </li>\
                ',
                props: ['title']
                })


            var example4 = new Vue({
                el: '#todo-list-example',
                data: {
                    newTodoText: '',
                    todos: [
                    {
                        id: 1,
                        title: 'Do the dishes',
                    },
                    {
                        id: 2,
                        title: 'Take out the trash',
                    },
                    {
                        id: 3,
                        title: 'Mow the lawn'
                    }
                    ],
                    nextTodoId: 4
                },
                methods: {
                    addNewTodo: function () {
                    this.todos.push({
                        id: this.nextTodoId++,
                        title: this.newTodoText
                    })
                    this.newTodoText = ''
                    }
                }
                })
          </script>
    </body>
</html>
